import React from 'react';
import { Toast } from 'antd-mobile'
import '../styles/style.css'
import { connect } from 'react-redux';
import UEditor from '../component/UEditor';
import { getAwaitApproval } from '../common/service'
import { saveData } from '../action/UserAction'

import NoPowerShow from '../component/NoPowerShow'

class WaitCheck extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			equipmentArr: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.deviceIds : [], //选择设备，数量数组
				constructionText: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.constructionContent[0].content : '',
			carNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.vehicleNum.toString() : '0',	//车辆数量
			personalNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.personNum.toString() : '0',
		}
	}

	commit() {
		const { showLoadModal, hideLoadModal } = this.props;
		showLoadModal();
		getAwaitApproval(this.props.userReducer.flowId) //流程id
		.then((data) => {
			const isOK = data.data;
			console.log(isOK);
			hideLoadModal();
			if (isOK.success) {
				this.props.dispatch(saveData(isOK.obj));
				this.props.currentPage(isOK.obj.flowBaseInfo.flowProcesses);
			} else {
				Toast.info(isOK.msg, 2);
			}
		})
		.catch((e) => {
			hideLoadModal();
			Toast.info('服务器异常', 2);
		})
	}
	
	render() {
		//判断是不是当前节点
		if (this.props.currentObj.flowId !== 8 || -1 === this.props.userReducer.roles.findIndex((value) => value === 65) || -1 === this.props.userReducer.roles.findIndex((value) => value === 66) || !this.props.isTodayStep()) {
			return (<NoPowerShow id={this.props.currentObj.flowId}></NoPowerShow>);
		}
		return (
			<div style={{padding: '1.42rem 0.2rem 0.4rem 0.2rem'}}>
				<div>
						<span className='num-title'>车辆数量</span>
						<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{this.state.carNum}</span>
						<span className='equipment-title'>设备</span>
						{this.state.equipmentArr.map((data, index) => {
							return (
								<div style={{paddingLeft: '0.15rem', marginBottom: '0.2rem'}} key={index}>
									<span style={{fontSize: '0.32rem',marginRight:'0.4rem', color: '#ccc'}}>{data.commonName}</span>
									<span style={{fontSize: '0.32rem',color: '#0e8dea', width:'30vw'}}>{data.commonNum}</span>
								</div>
							);
						})}
						<div style={{marginTop: '0.54rem'}}>
							<span className='num-title'>人员数量</span>
							<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{this.state.personalNum}</span>
						</div>
						<div style={{marginTop: '0.8rem'}}>
							<p className='num-title' style={{marginBottom: '0.32rem'}}>施工计划文档</p>
							<UEditor id="content" height="200" toolbars={[]} disabled={true} value={this.state.constructionText}/>  
						</div>
				</div>
				<div 
					id='canEnterBtn'
					className='btnCommit'
					onTouchStart={()=>{document.getElementById('canEnterBtn').style.backgroundColor = '#D97442'}}
					onTouchEnd={()=>{document.getElementById('canEnterBtn').style.backgroundColor = '#FFA24A'}}
					onClick={()=>{
						this.commit()
					}}
					style={{marginTop: 20}}
					>
					可以进入施工区
				</div>
			</div>
		);
	}
}


function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(WaitCheck);
